<template>
  <view class="search-bar">
    <div class="search-content p-[24rpx]">
      <input
        type="text"
        placeholder="请输入关键词"
        class="search-input"
        confirm-type="search"
        v-model="keyword"
        @confirm="bindSearch"
        maxlength="20"
      />
      <view class="search-btn">
        <img
          class="search-icon"
          src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201739%402x.png"
        />
      </view>
    </div>
    <div class="search-btn" @click="bindSearch">搜索</div>
  </view>
    <div class="">
        <div class="page" v-if="!showSearch">
            <div class="history-content" v-if="localHistory.length > 0">
                <div class="label-del">
                    <div class="label">历史记录</div>
                    <div class="del-icon">
                        <image
                            src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%20663%402x.png"
                        />
                    </div>
                </div>

                <div class="history-ul">
                    <div
                        class="history-item"
                        v-for="item in localHistory"
                        :key="item"
                        @click="bindSearch(item)"
                    >
                         {{ item }}
                    </div>
                </div>
            </div>
            <div class="history-content">
                <div class="label-del">
                    <div class="label">推荐搜索</div>
                    <div class="del-icon" @click="geSearchKeys">
                        <image
                            src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201676%402x.png"
                            style="width: 28rpx; height: 24rpx"
                        />
                        换一批
                    </div>
                </div>

                <div class="history-ul">
                    <div
                        class="history-item"
                        v-for="item in searchKeys"
                        :key="item"
                        @click="bindSearch(item)"
                    >
                        {{ item }}
                    </div>
                </div>
            </div>

            <div class="hot-content">
                <div class="hot-title">
                    <image
                        src="https://cos.aitshirt.cn/app-icon/%E7%83%AD%E6%A6%9C%402x.png"
                    />
                    <div
                        class="nav-item"
                        :class="{ active: tabIndex === 1 }"
                        @click="tabIndex = 1"
                    >
                        商品热销榜
                    </div>
                    <div
                        class="nav-item"
                        :class="{ active: tabIndex === 2 }"
                        @click="tabIndex = 2"
                    >
                        商品喜爱榜
                    </div>
                    <div
                        class="nav-item"
                        :class="{ active: tabIndex === 3 }"
                        @click="tabIndex = 3"
                    >
                        设计师热榜
                    </div>
                </div>

                <div class="good-ul">
                    <template v-if="tabIndex === 1">
                        <div
                            class="good-li"
                            v-for="(item, index) in bestSellingProductsList"
                            :key="item.id"
                        >
                            <image :src="item.image" />
                            <div class="good-info">
                                <div class="good-number">
                                    第{{ index + 1 }}名
                                </div>
                                <div class="truncate good-name">
                                    {{ item.storeName }}
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="tabIndex === 2">
                        <div
                            class="good-li"
                            v-for="(item, index) in likeProductsList"
                            :key="item"
                        >
                            <image :src="item.image" />
                            <div class="good-info">
                                <div class="good-number">
                                    第{{ index + 1 }}名
                                </div>
                                <div class="truncate good-name">
                                    {{ item.storeName }}
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="tabIndex === 3">
                        <div
                            class="good-li"
                            v-for="(item, index) in hotDesignersList"
                            :key="item"
                        >
                            <image :src="item.avatar" />
                            <div class="good-info">
                                <div class="good-number">
                                    第{{ index + 1 }}名
                                </div>
                                <div class="truncate good-name">
                                    {{ item.nickname }}
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <template v-else>
            <SearchTem :keyword="keyword"></SearchTem>
        </template>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, shallowRef,computed, unref } from 'vue';
import SearchTem from '@/pages/search/SearchTem.vue';
import {
    getBestsellingProductsList,
    getHotDesignersList,
    getLikeProductsList,
} from '@/api/searchApi';
import { getSearchKeyword } from "@/api/store";
import { useSearchHistoryStore } from '@/state/modules/searchHistory';
const useSearchHistory = useSearchHistoryStore();
useSearchHistory.initHistory();

const tabIndex = ref(1);
const bestSellingProductsList = shallowRef([]);
const likeProductsList = shallowRef([]);
const hotDesignersList = shallowRef([]);
const showSearch = ref(true);

const searchKeys = shallowRef([]);

const localHistory = computed(() =>   useSearchHistory.historyList)

onMounted(() => {
    getBestsellingProductsList(1, 9).then((res) => {
        bestSellingProductsList.value = res.data;
    });

    getLikeProductsList(1, 9).then((res) => {
        likeProductsList.value = res.data;
    });

    getHotDesignersList(1, 9).then((res) => {
        hotDesignersList.value = res.data;
    });
  geSearchKeys();
});

function geSearchKeys() {
  getSearchKeyword().then(res => {
    searchKeys.value = res.data
  })
}
const keyword = shallowRef('')
function bindSearch(key) {
  console.log('ssssssssssss', unref(keyword))
  if(key) keyword.value = key
  if(!keyword.value)  return;
  useSearchHistory.addHistory(unref(keyword));
  showSearch.value = true;
}

function updateLocalSearch() {
}

</script>

<style scoped lang="scss">
.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 100vw;
    height: 88rpx;
    background: #ffffff;
    box-shadow: 0rpx 1rpx 0rpx 2rpx #e7e7e7;
    padding: 8rpx 16rpx !important;
    box-sizing: content-box;
    .search-content {
      flex: 1;
        width: calc(100% - 48rpx);
        height: 72rpx;
        display: flex;
        align-items: center;
        background: #f3f7f8;
        border-radius: 8rpx;
        box-sizing: border-box;
        padding: 0 16px;
        .search-input {
            flex: 1;
            height: 38rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 38rpx;
        }

        .search-btn {
            .search-icon {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }

    .search-btn {
      height: 42rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #222222;
      line-height: 42rpx;
      margin-left: 24rpx;
      white-space: nowrap;
    }
}

.page .history-content {
    padding: 16px 16rpx 0;
    .label-del {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 16rpx;
        .label {
            height: 38rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #222222;
            line-height: 38rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .del-icon {
            display: flex;
            align-items: center;
            gap: 4rpx;
            image {
                width: 25rpx;
                height: 28rpx;
            }
            font-weight: 400;
            font-size: 20rpx;
            color: #666666;
            line-height: 28rpx;
        }
    }

    .history-ul {
        display: flex;
        flex-wrap: wrap;
        gap: 24rpx;
        .history-item {
            height: 48rpx;
            background: #f8f8f8;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
            line-height: 48rpx;
            text-align: center;
            padding: 8rpx;
        }
    }
}

.page .hot-content {
    background: linear-gradient(180deg, #fff4f1 0%, #ffffff 100%);
    padding: 28rpx 16rpx;
    margin: 32rpx 16rpx;
    .hot-title {
        display: flex;
        align-items: center;
        gap: 32rpx;
        image {
            width: 28rpx;
            height: 30rpx;
            margin-right: -18rpx;
        }
        .nav-item {
            font-weight: 400;
            font-size: 28rpx;
            color: #6f6f6f;
            line-height: 38rpx;
            &.active {
                font-weight: bold;
                font-size: 28rpx;
                color: #222222;
            }
        }
    }

    .good-ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 22rpx 0;
        gap: 16rpx;
        .good-li {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            //width: 218rpx;
            height: 260rpx;
            background: #ffffff;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 2rpx solid #e4edef;
        }
        image {
            width: 128rpx;
            height: 128rpx;
            background: #ffffff;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            border: 2rpx solid #707070;
        }
        .good-number {
            height: 28rpx;
            line-height: 28rpx;
            background: #f3f7f8;
            border-radius: 4rpx 4rpx 4rpx 4rpx;
            margin: 8rpx 0;
            font-weight: 400;
            font-size: 16rpx;
            color: #f25a27;
            text-align: center;
        }
        .good-name {
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
            line-height: 32rpx;
        }
    }
}
</style>
